<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="/WEB-INF/include/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>插件使用示例</title>
<d:script id="jquery,om-ui" />
<d:script path="/static/om-ui/operamasks-ui-plugin.js" />
<d:css id="om-ui" />

<script type="text/javascript">
	$(document).ready(function() {
		initUI();
	});
</script>
<style type="text/css">
html,body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

.qtip-target {
	background: none repeat scroll 0 0 #DFE8F6;
	border: 1px dotted #99BBE8;
	color: #15428B;
	cursor: default;
	float: left;
	font: bold 11px tahoma, arial, sans-serif;
	margin: 10px;
	padding: 5px 0;
	text-align: center;
	width: 200px;
}
</style>
</head>
<body>
	<div trackMouse="true" class="ui-tooltip" rendererTo="#tip"
		html='<span style="color:red;">欢迎使用omTooltip组件！</span>'></div>
	<div class="ui-tooltip" region="right"
		rendererTo="#tip1,#tip2"><span style="color: red;">欢迎使用omTooltip组件(公用的提醒信息)！</span></div>
	<div class="ui-tooltip" region="right" rendererTo="#tip3"
		delay="2000">
		<span style="color: red;">终于看到您老人家了</span>
	</div>
	<div class="ui-tooltip" region="right" rendererTo=".tip-target"
		delay="500">
		<span style="color: red;">通过class定位来对拥有tip-target的div进行提示</span>
	</div>
	<div class="qtip-target" id="tip">鼠标移上来看看</div>
	<div style="width: 50px;">&nbsp;</div>
	<div class="qtip-target" id="tip1">提示出现在右边</div>
	<div style="float: left;"></div>
	<div class="qtip-target" id="tip2">提示同样出现在右，并且与前面一个提示是相同的.</div>
	<div style="width: 50px; clear: both">&nbsp;</div>
	<div class="qtip-target" id="tip3">两秒之后出现提示</div>
	<div style="clear: both;"></div>
	<br />
	<div class="qtip-target tip-target">使用class定位的tooltip</div>
	<div class="qtip-target tip-target">同样使用class定位的tooltip</div>

</body>
</html>